<!-- 选择月份小组件 -->
<template>
  <div class="months-grid">
    <px-check-tag
      v-for="month in months"
      :key="month.value"
      :checked="selected.includes(month.value)"
      class="months-grid-item"
      @change="toggleMonth(month.value)"
    >
      {{ month.label }}
    </px-check-tag>
  </div>
</template>

<script setup>
import { ref } from "vue";
const emits = defineEmits(["monthChange"]);

// 使用 defineModel 处理 v-model 绑定的值
const selected = defineModel({
  selected: {
    type: Array,
    default: () => []
  }
});

// 定义月份
const months = ref([
  { value: "1", label: "1月" },
  { value: "2", label: "2月" },
  { value: "3", label: "3月" },
  { value: "4", label: "4月" },
  { value: "5", label: "5月" },
  { value: "6", label: "6月" },
  { value: "7", label: "7月" },
  { value: "8", label: "8月" },
  { value: "9", label: "9月" },
  { value: "10", label: "10月" },
  { value: "11", label: "11月" },
  { value: "12", label: "12月" }
]);

// 切换选中的月份
const toggleMonth = val => {
  if (selected.value.includes(val)) {
    selected.value = selected.value.filter(v => v !== val);
  } else {
    selected.value.push(val);
  }
  emits("monthChange", selected.value);
};
</script>

<style scoped>
.months-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    padding: 0;
  }
}
</style>
